import React, { Component } from 'react'
import reactDom from 'react-dom'
// 1.类式组件
/* class Count extends Component {
    state = {
        count: 0
    }
    add = () => {
        // 1.使用对象形式
        let { count } = this.state
        this.setState({ count: count + 1 })
    }
    unmount = () => {
        reactDom.unmountComponentAtNode(document.getElementById('root'))
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState(state => ({ count: state.count + 1 }))
        }, 1000);
    }
    showMsg = () => {
        console.log(this.showInpMsg.value);
    }
    render() {
        return (
            <div>
                <h1>当前求和为:{this.state.count}</h1>
                <input type="text" ref={c => this.showInpMsg = c} />
                <button onClick={this.add}>加一</button>
                <button onClick={this.unmount}>卸载跟组件</button>
                <button onClick={this.showMsg}>提示数据</button>
            </div>
        )
    }
} */
// 2. 函数式组件
function Count() {
    const [count, setCount] = React.useState(0)
    const Ref = React.useRef()
    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000);
        return () => {
            clearInterval(timer)
        }
    }, [])
    function add() {
        setCount(count + 1) //第一种写法
    }
    function unmount() {
        reactDom.unmountComponentAtNode(document.getElementById('root'))
    }
    function showMsg(){
        console.log(Ref.current.value);
    }
    return (
        <div>
            <h1>当前求和为: {count} </h1>
            <input type="text" ref={Ref} />
            <button onClick={add}>加一</button>
            <button onClick={unmount}>卸载跟组件</button>
            <button onClick={showMsg}>点我提示数据</button>
        </div>
    )
}
/* 
   React.useEffect(() => {

   }, []) 
       [count]监听count 如果count发生改变 则调用函数 
       []空数组为谁也不检测 
       如果不写空数组 则默认监听所有state
*/
export default Count

